<template>
  <div>
    <div class="shequ">
      <div class="shequtouxiang">
        <img src="../../img/shequ.webp" alt="" />
      </div>
      <div class="search">
        <van-search v-model="value" placeholder="搜索养宠知识与经验" />

        <router-link :to="{ path: '/main' }" tag="button"></router-link>
      </div>
    </div>
    <div class="tab">
      <van-tabs v-model:active="active">
        <van-tab title="关注">关注</van-tab>
        <van-tab title="精选">精选</van-tab>
        <van-tab title="问答" class="quest">
          <div class="wenda tj">
            <van-tabs v-model:active="actives">
              <van-tab title="新手养狗">新手养狗</van-tab>
              <van-tab title="待解答">
                <div class="daijiedaa">
                  <img src="../../img/hh.webp" alt="" />
                </div>
              </van-tab>
              <van-tab title="推荐">
                <div class="tuijian" style="overflow: scroll">
                  <ul>
                    <li v-for="(item, index) in data" :key="index">
                      <p class="p1">
                        <img :src="item.img" alt="" />
                        <span class="span">{{ item.name }}</span>
                      </p>
                      <p class="p2">
                        <span>{{ item.title }}</span>
                        <i>{{ item.context }}</i>
                      </p>
                      <p class="p3">
                        <span><img :src="item.discuss" alt="" /></span>
                        <span><img :src="item.admire" alt="" /></span>
                      </p>
                    </li>
                  </ul>
                </div>
              </van-tab>
              <van-tab title="行为训练">
                <div class="xunlian">
                  <img src="../../img/xingweixunl1.webp" alt="" />
                </div>
              </van-tab>
              <van-tab title="疾病互助">疾病互助</van-tab>
              <van-tab title="日常闲聊">日常闲聊</van-tab>
            </van-tabs>
          </div>
        </van-tab>
        <van-tab title="新手养宠">新手养宠</van-tab>
        <van-tab title="种草测评">种草测评</van-tab>
        <van-tab title="激萌">激萌</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    const active = ref(2);
    const actives = ref(2);
    const data = reactive([
      {
        img: require("../../img/sqtoux.webp"),
        name: "韩笑",
        title: "狗狗尿血？",
        context:
          "刚从宠物店回来 寄样了半个月 精神头不是很好 然后尿血 了一滩血还很臭恶臭四个月的拉布拉多",
        discuss: require("../../img/shequtb1.webp"),
        admire: require("../../img/shequtb2.webp"),
      },
      {
        img: require("../../img/shequtoux1.webp"),
        name: "李雷",
        title: "怎么训练狗狗知道自己的名字？",
        context: "6.27接回家的好像到现在也不知道自己叫 什么名字，怎么训练呢！",
        discuss: require("../../img/shequtb1.webp"),
        admire: require("../../img/shequtb2.webp"),
      },
      {
        img: require("../../img/shequtoux2.webp"),
        name: "Zoeyyyy",
        title: "新手狗狗铲屎官都需要哪些必备品？",
        context:
          "Hello大家好，我是一名新手铲屎官。第 一次养狗还是有很多不知道的注意事项...",
        discuss: require("../../img/shequtb1.webp"),
        admire: require("../../img/shequtb2.webp"),
      },
    ]);
    return { active, actives, data };
  },
  methods: {
    handle() {},
  },
};
</script>
<style lang="less">
/* search */
.shequ {
  width: 100%;
  height: 60px;
  background: #ffffff;
  position: relative;
  margin-top: 10px;
}
.shequtouxiang {
  width: 28px;
  height: 28px;
  position: absolute;
  left: 22px;
  top: 20px;
}
.shequtouxiang img {
  width: 100%;
  height: 100%;
}
.search {
  width: 300px;
  height: 53px;
  border-radius: 6px;
  position: absolute;
  left: 74px;
  top: 8px;
  position: relative;
}
.router-link-active {
  position: absolute;
  left: 100px;
  top: 10px;
  width: 200px;
  height: 40px;
}
.van-search {
  width: 300px;
  height: 51px;
}
.van-field__body input {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #909090;
}
/* tab */
.tab {
  width: 100%;
  height: 40px;
  background: #ffffff;
  position: fixed;
}

.quest .van-tab__text {
  line-height: 26px;
  width: 83px;
  height: 26px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #696969;
}
.van-tabs__line {
  background-color: orange;
}
.van-tab__text {
  width: 100%;
}
.van-tab__text--ellipsis {
  text-align: center;
}
.van-tabs__wrap--scrollable .van-tab {
  text-align: center;
  padding: 0;
}
/* 问答部分 */
.wenda {
  margin-top: 4px;
}
.wenda .van-tab__text {
  line-height: 26px;
  width: 83px;
  height: 26px;
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  color: #696969;
}
.wenda .van-tab__text {
  width: 100%;
}
.van-tab--active {
  color: #000;
  font-weight: 50px;
}

.wenda .tj {
  color: transparent;
  font-weight: 500;
  font-size: 28px;
}
.wenda .van-tab__text--ellipsis {
  text-align: center;
}
.wenda .van-tabs__wrap--scrollable .van-tab {
  text-align: center;
  padding: 0;
}
.wenda .van-tabs__nav {
  background-color: #ffffff;
}
/* 推荐 */
.tj .van-tabs__line {
  background-color: lightgray;
}

.tuijian ul li {
  position: relative;
  width: 100%;
  height: 190px;
  background-color: #ffffff;
}
/*  */
.tuijian {
  width: 100%;
}
ul {
  width: 100%;
  height: 500px;
}
.p1 img {
  position: absolute;
  left: 15px;
  top: 10px;
  display: block;
  width: 35px;
  height: 35px;
}
.span {
  position: absolute;
  left: 60px;
  top: 10px;
  width: 54px;
  height: 26px;
  line-height: 26px;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 520;
  color: #000005;
}
.p2 {
  position: absolute;
  left: 16px;
  top: 50px;
}
.p2 span {
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #000005;
  display: block;
}
.p2 i {
  width: 324px;
  height: 25px;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #4e4e4e;
  line-height: 12px;
}
.p3 {
  position: absolute;
  right: 15px;
  top: 150px;
}
.p3 span {
  margin-left: 10px;
}
.p3 img {
  display: inline-block;
  width: 18px;
  height: 16px;
}
.daijieda {
  width: 375px;
  height: 450px;
}
.daijiedaa img {
  width: 375px;
  height: 450px;
}
.xunlian {
  width: 375px;
  height: 450px;
}
.xunlian img {
  width: 375px;
  height: 450px;
}
</style>
